<template>
    <div style="margin-top: 16px">
        <van-tabs type="card" v-model="active">
            <van-tab v-if="data.components.length > 0 && this.$store.state.selectedSubComponent !== null" title="表单控件">
                <component :is="this.$store.state.selectedSubComponent.config.type" :data.sync="this.$store.state.selectedSubComponent.data">
                </component>
            </van-tab>
            <van-tab title="表单配置">
                <slot name="global-config"></slot>
                <van-form>
                    <h2 v-if="data.components.length > 0" class="form-group-label">
                        基本配置
                    </h2>
                    <van-field
                            v-model="data.label"
                            label="表单名称"
                            :rules="[{ required: true, message: '表单名称不能为空' }]"
                    />
                    <Del :id="data.id" msg="删除当前表单"></Del>
                </van-form>
            </van-tab>
        </van-tabs>
    </div>
</template>
<style>

</style>
<script>
    import Draggable from 'vuedraggable'
    import Del from './../form/common/del'

    export default {
        components: {
            Draggable,
            Del
        },
        props : {
            data : Object,
        },
        computed: {
            dragOptions() {
                return {
                    animation: 200,
                    group: "description",
                    disabled: false,
                    ghostClass: "ghost"
                };
            },
        },
        beforeMount() {

        },
        mounted () {
            //console.log(this.data)
        },
        data() {
            return {
                active : 0
            }
        },
        watch: {
            data() {
                //console.log('data changed')
            }
        },
        methods: {
        }
    }
</script>